<template>
  <j-modal
    width="80%"
    :title="title"
    :maskClosable="false"
    switchFullscreen
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
  >
    <template slot="footer">
      <a-button @click="handleCancleDbSync">
        关闭
      </a-button>
      <a-button type="primary" v-if="!disableSubmit" :loading="syncLoading" @click="handleDbSync">确认</a-button>
      <a-button type="primary" v-if="!disableCheck" :loading="syncLoading" @click="handleVerify">审核</a-button>
    </template>
    <vxe-grid
      ref="xTable"
      border
      resizable
      keep-source
      height="300px"
      align="center"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'row',activeMethod: activeRowMethod}"
      :columns="tableColumn"
      :data="dataSource"
    >
    </vxe-grid>
  </j-modal>
</template>
<script>
import { postAction, putAction, getAction, postActionQs } from '@/api/manage'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'AssessmentVerifyModal',
  components: {
    JSelectMultiUser
  },
  data() {
    return {
      editModalVisible: false,
      disableSubmit: false,
      title: '',
      syncLoading: false,
      tableColumn: [
        { type: 'seq', width: 60 },
        { field: 'instanceCode', title: '任务编码' },
        { field: 'user.realname', title: '被考核人' },
        { field: 'score', title: '考核分值' },
        { field: 'finalScore', title: '最终分值', editRender: { name: '$input', props: { type: 'number' }}},
        { field: 'assessmentScore', title: '绩效比例（%）' }
      ],
      validRules: {
        finalScore: [
          { required: true, message: '请填写最终分值' },
          { min: 0, max: 100, type: 'number', message: '请填写0-100之间的数字' }
        ]
      },
      dataSource: [],
      disableCheck: true,
      url: {
        queryResult: '/hr/assessment/instance/queryResult',
        editBatchScore: '/hr/assessment/plan/editBatchScore',
        verifyTask: '/hr/assessment/instance/verifyTask'
      },
      id: ''
    }
  },
  methods: {
    handleCancleDbSync() {
      this.editModalVisible = false
    },
    async handleDbSync() {
      const errMap = await this.$refs.xTable.validate(true).catch(errMap => errMap)
      if (!errMap) {
        this.updateData()
      }
    },
    updateData() {
      this.syncLoading = true
      const { fullData } = this.$refs.xTable.getTableData()
      putAction(this.url.editBatchScore, fullData).then(res => {
        this.actionSuccess(res)
      })
    },
    actionSuccess(res) {
      this.syncLoading = false
      if (res.success) {
        this.$emit('ok')
        this.editModalVisible = false
        this.$message.success(res.message)
      } else {
        this.$message.warning(res.message)
      }
    },
    handleVerify() {
      postActionQs(this.url.verifyTask, { instanceId: this.id }).then(res => {
        if (res.success) {
          this.$emit('ok')
          this.editModalVisible = false
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    loadData(instanceCode) {
      getAction(this.url.queryResult, { instanceCode: instanceCode }).then(res => {
        if (res.success) {
          this.dataSource = JSON.parse(JSON.stringify(res.result))
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    activeRowMethod() {
      return !this.disableSubmit
    }
  }
}
</script>
<style lang="less">

</style>
